<!DOCTYPE html>
<html lang="en">
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--jquery-->

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="userAvatarForm" enctype="multipart/form-data">
    <input type="file" name="file" id="img">
    <input type="button" value="提交" onclick="updateAvatar()">
    <input type="button" value="预览" onclick="getHtml()">
</form>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">

    /*文件地址，如“D//test.excel ”*/
    let filePath = "";


    function updateAvatar() {
        let formData = new FormData($('#userAvatarForm')[0]);
        formData.append("file", $("#img")[0].files[0]);

        let uploading = false;
        if (uploading) {
            alert("文件正在上传中，请稍候!");
            return false;
        }

        $.ajax({
            url: '/uploadExcel', /*接口域名地址*/
            type: 'POST',
            data: formData,
            async: false,
            contentType: false,
            processData: false,
            dataType: "json",
            beforeSend: function () {
                uploading = true;
                console.log(uploading);
            },
            success: function (res) {
                console.log(res);
                uploading = false;
                filePath = res.url;
            }
        })
    }

    // 点击预览函数
    function getHtml() {
        console.log(filePath)
        let data = {
            "excelUrl":filePath
        }
        $.ajax({
            url: '/getHtml', /*接口域名地址*/
            type: 'POST',
            data: JSON.stringify(data),
            contentType: "application/json",
            processData: false,
            dataType: "json",
            success: function (res) {
            //   想办法渲染完整的带html标签的字符串
                console.log(res);
                $("body").html(res.html);



            }
        })
    }


</script>
</html>